Roath Park 5 gates v1

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<div style="text-align: center;"><b>Roath Park, Cardiff.</b></div> <<audio ":playing" stop>> <<audio "clock" volume 0.1 play>> <span id="clickme"><<link "You are alone.">>\ <<replace "#clickme">><</replace>>\ <<timed 1s>>\ <<append "#seasons">><p>Only you can see seasons become years...</p><</append>>\ <</timed>>\ <<timed 3s>>\ <<append "#seasons">><p>Years become lives....</p><</append>>\ <</timed>>\ <<timed 5.5s>>\ <<append "#seasons">><p>Lives become loves...</p><</append>>\ <</timed>>\ <<timed 8s>>\ <<append "#seasons">><p>Loves blossom and die...</p><</append>>\ <</timed>>\ <<timed 10s>>\ <<audio ":playing" stop>> <<audio "birds" volume 0.1 play>> <</timed>> <<timed 10.5s>>\ <<append "#seasons">>\ <p>Five gates into the park. Which will you choose?</p>\ <div class="gate-box">\ <<if $count lt $maxGates>><<gates>><</if>>\ </div>\ <</append>>\ <</timed>>\ <</link>></span> <span id="seasons"></span>

<<set $count += 1>> <<done>> <<audio ":all" stop>> <<timed 0.05s>> <<audio "lake" volume 0.4 play>> <</timed>> <</done>> <<if $Botanical is true>> <<pastmemory>> <</if>>\ <b>The Promenade.</b> Walking home from High School, sunshine warm on my face. At Nain's bench, I sit while the gang walks on. A blonde girl in Grammar school uniform sits next to me, scrolling her iPhone. She catches me staring. <i>'What?' 'Nothing... I noticed how blue your eyes are.' 'You flirting? Be asking for my number next.' 'Well, what is it then?'</i> She takes my phone, types, and mine rings. <i>'There. Call me if you want.'</i> I go red. <i>'I'm Ffion.' 'Dylan. Gotta go. Bye, Ffion.' 'See ya, Dylan.'</i> <span id="fade-text" style="opacity:1; transition: opacity 6s ease-out;">\ The gate fades into memory.\ </span>\ <<timed 3.0s>> <<script>> document.getElementById("fade-text").style.opacity = "0"; <</script>> <</timed>> <<set $Prom to true>>\ <<if $count gt 1>> <<benchmemory>> <<if $benchmessage.length gt 0>> <div class="shimmer-box"> <<print $benchmessage.replace(/\n/g,"<br>")>> </div> <</if>> <</if>>\ <div class="gate-box">\ <<set $Promeastvisit to $count>>\ <<if $count >= $maxGates>>\ <<funeral>>\ <<else>>\ <<gates>>\ <</if>>\ </div>

<<done>> <<audio ":all" stop>> <<timed 0.05s>> <<audio "queue" volume 0.4 play>> <</timed>> <</done>> <<set $count += 1>> <<if $Botanical is true>> <<pastmemory>> <</if>> <b>Terra Nova and the Boating lake.</b> Mam holds my hand as we walk to Nain's bench. <i>'Your Nain and Bampi loved it here.' </i> We come every Bonfire Night. Mam always cries a bit. She gives me bread for the ducks. <i>'Don't fall in.' </i> I only fell in once, when I was little. A girl with yellow hair stands next to me. She hands me a daffodil. <i>'Swap for some bread? They smell funny.' 'Why do girls like pink?' 'I don't. It's got a unicorn. Unicorns are magic. I'm Ffion.' 'I'm Dylan. Bye.' 'Bye, Dylan.'</i>\ <span id="fade-text" style="opacity:1; transition: opacity 6s ease-out;">\ The gate fades into memory. </span>\ <<timed 3.0s>> <<script>> document.getElementById("fade-text").style.opacity = "0"; <</script>>\ <</timed>> <<set $Cafe to true>>\ <<if $count gt 1>>\ <<benchmemory>>\ <<if $benchmessage.length gt 0>>\ <div class="shimmer-box">\ <<print $benchmessage.replace(/\n/g,"<br>")>>\ </div>\ <</if>>\ <</if>>\ <div class="gate-box">\ <<set $Cafevisit to $count>>\ <<if $count >= $maxGates>>\ <<funeral>>\ <<else>>\ <<gates>>\ <</if>>\ </div>

<b>The Botanical Garden - New Year's Eve. \ <<audio ":playing" stop>>\ <<audio "wind" volume 0.3 play>>\ The park is mine alone. Frost silvers the grass in moonlight. Fireworks crackle over Roath. Mist hovers on the lake. She's been gone a year. The pain hasn't dulled. <span style="display: inline-block; animation: shiver 0.1s infinite;">I've sat here too long. Cold seeps into my bones.</span> \ <<timed 2s>> <span style="color: white;"> Nain and Bampi emerge from the mist. <i>'Happy New Year, Dylan.'</i> </span> <</timed>>\ <<timed 4s>>\ They fade. <span style="color: white; font-weight: bold;"> Mam touches my face, fingers icy. <i>'Not long now, Dyl.' </i> </span> <</timed>>\ <<timed 6s>>\ She fades. <span style="color: white; font-weight: bold;">\ A blonde with dark eyes and crimson lips sits beside me. Cold kiss on my cheek. <i>'See ya, Dylan.'</i> </span> <</timed>>\ <<timed 8s>> 'Bye, Ffion.' <span style="color: white; font-weight: bold;">\ <i>'You're coming with me.'</i>\ </span>\ <<if $Cafe is true and $Prom is true>>\ <<set $Botanicalvisit to 1>>\ <b><<pastmemory>></b>\ <</if>>\ <<set $Botanical to true>>\ <<set $count += 1>>\ <div class="gate-box">\ <<set $Botanicalvisit to $count>>\ <<if $count >= $maxGates>>\ <<funeral>>\ <<else>>\ <<gates>>\ <</if>>\ </div> <</timed>>\

<<set $count to 0>> <<set $maxGates to 5>> <<set $Rose to false>> <<set $Play to false>> <<set $Botanical to false>> <<set $Cafe to false>> <<set $Prom to false>> <<set $Cafevisit to 0>> <<set $Promeastvisit to 0>> <<set $Rosevisit to 0>> <<set $Playvisit to 0>> <<set $Botanicalvisit to 9>> <<set $benchmessage to "">> <<cacheaudio "birds" "https://cardiffwriters.org/twines/audio/birds.mp3">> <<cacheaudio "wind" "https://cardiffwriters.org/twines/audio/wind.mp3">> <<cacheaudio "queue" "https://cardiffwriters.org/twines/audio/queue.mp3">> <<cacheaudio "lake" "https://cardiffwriters.org/twines/audio/lake.mp3">> <<cacheaudio "clock" "https://cardiffwriters.org/twines/audio/bbc_clocks---g_07022188.mp3">>

<<widget "pastmemory">> <div class="medic-voices"> <i> <<if $Botanicalvisit < $count>> '...on a bench... Roath Park...' '...all night, they reckon...' 'Temp's twenty-eight. Severely hypothermic.' 'Can you hear me, love? What's your name?' The words float past like the mist off the lake. <<if $Play>> I remember the playground, waiting for Ffi. She had started tripping, couldn't open jars. She was so stubborn, had to go alone. <</if>> <<if $Prom>> 'You've got my number now. You can call me if you want.' I was too scared. She seemed so self-assured. I was only 14. <</if>> <<if $Cafe>> Unicorn girl. Yellow hair and blue wellies. Unicorns are magic. <</if>> <<if $Rose>> FFion? "Do I know you?" "Oh, you never called." <</if>> <</if>> </i> </div> <</widget>>

<b>Eulogy</b> <div class="eulogy-box"> <div style="border: 3px solid black; background-color: #d3d3d3; padding: 1em;"> Carys stands first. Tom stays seated, staring at the order of service. 'Dad wore his heart on his sleeve. When Mum got ill, he never complained. Learned the hoist, the suction machine. He'd sit for hours, holding her hand, telling her about the ducks.' She pauses. 'After she died, he kept going to their bench. Said he could still feel her there.' Tom stands, puts his arm around his sister. 'He died on that bench. Looking at the lake. I like to think she came to get him.' Carys nods. 'They're together now.' </div></div> <<link "Stay a little longer">> <<run Engine.restart()>> <</link>>

<<widget "funeral">>\ <<if $count >= $maxGates>>\ <span style="<<if $Botanical is true>>font-weight: bold; color: black;<</if>>">\ <<link "Attend the Remembrance Service" "Finale">><</link>> <<link "Stay a little longer">><<run Engine.restart()>><</link>>\ </span>\ <</if>>\ <</widget>>\

<<widget "benchmemory">> /* Reset on entry */ <<set $benchmessage to "">> <<if $Cafe>> <<set $benchmessage += "\"You're Unicorn girl!\"\n\"What... You're weird! Oh no, you're Duck Boy!\"\n">> <</if>> <<if $Prom>> <<set $benchmessage += "\"You've got blue eyes!\"\n\"Duck Boy!\"\n">> <</if>> <<if $Rose>> <<set $benchmessage += "\"FFion?... Do I know you?\"\n">> <</if>> <<if $Play>> <<set $benchmessage += "'She will, Dad. We'll look after her...'\n">> <</if>> <</widget>>

<<widget "gates">> <<nobr>> <<set _gates to []>> <<if $Prom is false>> <<set _gates.push('Promenade->Promeast')>> <</if>> <<if $Cafe is false>> <<set _gates.push('Cafe->Cafe')>> <</if>> <<if $Rose is false>> <<set _gates.push('Rose Garden->Rose')>> <</if>> <<if $Play is false>> <<set _gates.push('Playground->Play')>> <</if>> <<if $Botanical is false>> <<set _gates.push('Botanical Gardens->Botanical')>> <</if>> <<set _shuffled to []>> <<for ; _gates.length > 0 ; >> <<set _i to random(0, _gates.length - 1)>> <<set _shuffled.push(_gates[_i])>> <<set _gates.deleteAt(_i)>> <</for>> <<for _gate range _shuffled>> <<capture _gate>> <<link _gate.split('->')[0] _gate.split('->')[1]>><</link>><br> <</capture>> <</for>> <</nobr>> <</widget>>

<<done>>\ <<audio ":all" stop>>\ <</done>>\ <<set $count += 1>>\ <<if $Botanical is true>>\ <<pastmemory>> <</if>>\ <b>The Playground.</b> <i>'Sit on Nain's bench. I'll give you bread for the ducks.'</i> The twins hurl themselves down. <i>'Can we have phones for Christmas, Dad?' 'I want a red one like Mum.'</i> Carys shrugs. <i>'I don't care what colour. Girls can do anything boys do.'</i> I give them bread. <b><i>'Don't fall in.'</i></b> They run to the lake. Tom throws huge chunks. Carys tears hers carefully. The bench feels cold. <i>If Ffion doesn't get better...</i> Carys presses against my arm. <i>'She will, Dad. We'll look after her. Mostly me.'</i> I try to smile. <i>'Mostly you.'</i>\ <span id="fade-text-play" style="opacity:1; transition: opacity 6s ease-out;"> The gate fades into memory. </span>\ <<timed 3.0s>> <<script>> document.getElementById("fade-text-play").style.opacity = "0"; <</script>> <</timed>> <<set $Play to true>>\ <<if $count gt 1>> <<benchmemory>>\ <<if $benchmessage.length gt 0>> <div class="shimmer-box"> <<print $benchmessage.replace(/\n/g,"<br>")>> </div> <</if>> <</if>>\ <div class="gate-box">\ <<set $Playvisit to $count>>\ <<if $count < $maxGates>>\ <<gates>>\ <</if>>\ </div>\ <<funeral>>

<<done>>\ <<audio ":all" stop>>\ <</done>>\ <<set $count += 1>>\ <<if $Botanical is true>>\ <<pastmemory>>\ <</if>>\ <b>The Rose Garden</b> Had to escape the house. They've got so old, fussing over everything. I feel a stranger in my own home. A run keeps me sane. Two laps, then coffee on Nain's bench. A blonde's sitting there. Blue eyes staring at the lake. <i>'Ffion?'</i> She squints. <i>'Do I know you?' 'Dylan. You gave me your number once. I was too scared to call.' 'Samsung boy.'</i> She smiles. <i>'You never called.' 'I was fourteen.'</i> She laughs. <i>'Coffee? You can buy me one.' 'I owe you eight years of phone credit.'</i> <span id="fade-text-rose" style="opacity:1; transition: opacity 6s ease-out;"> The gate fades into memory. </span>\ <<timed 3.0s>> <<script>> document.getElementById("fade-text-rose").style.opacity = "0"; <</script>> <</timed>>\ \ <<set $Rose to true>>\ <<if $count gt 1>> <<benchmemory>>\ <<if $benchmessage.length gt 0>> <div class="shimmer-box"> <<print $benchmessage.replace(/\n/g,"<br>")>> </div> <</if>> <</if>>\ <div class="gate-box">\ <<set $Rosevisit to $count>>\ <<if $count < $maxGates>>\ <<gates>>\ <</if>>\ </div>\ <<funeral>>